<template>
  <div>
    <input type="text" v-model="message" />
    <button @click="append">添加</button>
    共{{ listCount }}条数据
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}<span v-on:click="del(index)">X</span>
      </li>
    </ul>
    <button @click="go(1)">1</button>
    <button @click="go(2)">2</button>
  </div>
</template>
<style scoped>
a {
  color: red;
}
li span {
  padding: 0 20px;
  color: red;
}
</style>
<script>
export default {
  name: "todo",
  props: ["uid"],
  data() {
    return {
      style: "btn",
      message: "message",
      list: []
    };
  },
  computed: {
    listCount() {
      return this.list.length;
    }
  },
  watch: {
  },
  created() {
    console.log("created", this.$route.path);
  },
  beforeRouteUpdate(to, from, next) {
    // console.log("beforeRouteUpdate", this.$route.path);
    next();
  },
  methods: {
    del(index) {
      console.log(index);
      this.list.splice(index, 1);
    },
    go(page) {
      this.$router.push("/todo/" + page);
    },
    append() {
      this.list.push(this.message);
      this.message = "";
    }
  }
};
</script>
